<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>COMP 723 Software Design and Implementation -- Online Voting System Design, by Yinpeng Li and Tian Cao</title>

<style type="text/css">
.H1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-variant: normal;
	font-weight: bold;
	line-height: 100%;
}
.H2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-variant: normal;
	font-weight: bold;
	line-height: 100%;
}
.H3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-variant: normal;
	font-weight: bold;
	line-height: 100%;
}
.H4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-variant: normal;
	font-weight: bold;
	line-height: 100%;
}
.H5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-variant: normal;
	font-weight: bold;
	line-height: 100%;
}
.F {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-variant: normal;
	font-weight: normal;
	line-height: 150%;
}
</style>

</head>
<body>

<p align="center" class="H1">COMP723 Software Design and Implementation</p>
<p align="center" class="H2">Online Voting System Design</p>
<p class="F" align="center">by Yinpeng Li and Tian Cao</p>

<hr><!-- Finish of title -->

<p class="H2">Table of Contents</p>
<p class="H3"><a href="#SystemDescription">System Description</a></p>
<blockquote>
<p class="H4"><a href="#SystemLogicExplanations">System Logic Explanations</a></p>
<p class="H4"><a href="#UserStories">User Stories</a></p>
<p class="H4"><a href="#UseCaseDiagram">Use Case Diagram</a></p>
<p class="H4"><a href="#Workflow">Workflow</a></p>
</blockquote>
<p class="H3"><a href="#SystemDesign">System Design</a></p>
<blockquote>
<p class="H4"><a href="#SystemArchitecture">System Architecture</a></p>
<p class="H4"><a href="#DesignPatterns">Design Patterns</a></p>
<blockquote>
<p class="H5"><a href="#Composite">Composite</a></p>
<p class="H5"><a href="#FactoryMethod">Factory Method</a></p>
<p class="H5"><a href="#Decorator">Decorator</a></p>
<p class="H5"><a href="#Flyweight">Flyweight</a></p>
<p class="H5"><a href="#Observer">Observer</a></p>
<p class="H5"><a href="#Proxy">Proxy</a></p>
<p class="H5"><a href="#Command">Command</a></p>
<p class="H5"><a href="#IteratorandStrategy">Iterator and Strategy</a></p>
<p class="H5"><a href="#Memento">Memento</a></p>
<p class="H5"><a href="#Facade">Facade and Singleton</a></p>
<p class="H5"><a href="#State">State</a></p>
</blockquote>
</blockquote>
<p class="H3"><a href="#Discussion">Discussion</a></p>

<hr><!-- Finish of Index -->

<p class="H3"><a name="SystemDescription"></a>System Description</p>
<p class="H4"><a name="SystemLogicExplanations"></a>System Logic Explanations</p>
<blockquote>
<p class="F">Inside of the system, a <i>Voter</i> is not allowed to participate in any election until he/she has registered as an <i>Electorate</i>. An <i>Election officer</i> is in charge of system maintenance, voter registration approval, election creation, etc.</p>
<p class="F">An election can be at different levels and be of different topics. It can either be a voting of political referendums, or a voting of candidates for a government position. Depending on the type of an election, the <i>Ballot</i> can contain different kind of options.</p>
</blockquote>
<p class="H4"><a name="UserStories"></a>User Stories</p>
<blockquote>
	<ol class="F">
	<li>As a voter, I want to register in an election so that I can become an electorate and vote in the election.</li>
	<li>As a candidate, I want to publish me and my party's statements and platforms so that the electorates can see them.</li>
	<li>As a election officer, I want to start new national/state/local-level elections so that electorate can participate in them.</li>
	<li>As a election officer, I want to cancel an election so that the election is annulled.</li>
	<li>As a election officer, I want to verify voters' registration information to authenticate their identities and prohibit them from being registered in more than one place.</li>
	<li>As a election officer, I want to set restrictions in the system so that non-registered voters can not participate in elections, and one electorate can not vote more than once in any single election.</li>
	<li>As a election officer, I want to change settings of the system so that elections can last for a period of any length.</li>
	<li>As a election officer, I want to change settings of the system so that the electorates can change or cancel their votes before the end of the election.</li>
	<li>As a election officer, I want to publish relative laws, news, voting instructions and statements so that the electorates can see them.</li>
	<li>As a election officer, I want to create ballots of choices of all the issues or referendums or candidates for the elections so that the electorates can make their choices.</li>
	<li>As a election officer, I want to tally the votes and get relative statistical data to generate the report of an election.</li>
	<li>As a electorate, I want to view the relative laws, news, voting instructions and statements so that I can learn how to vote in the election.</li>
	<li>As a electorate, I want to view the candidates and their parties' statements and platforms so that I can understand the candidates' policies.</li>
	<li>As a electorate, I want to view the ballot so that I can know my choices.</li>
	<li>As a electorate, I want to vote for the candidates or issues or referendums so that I can express my idea.</li>
	<li>As a electorate, I want to change or cancel my vote before the end of the election so that I can change my choice.</li>
	</ol>
</blockquote>
<p class="H4"><a name="UseCaseDiagram"></a>Use Case Diagram</p>
<p align="center"><img src="UseCase.png"/></p>
<p class="H4"><a name="Workflow"></a>Workflow</p>
<p align="center"><img src="classdiag/flowchart.jpg"/></p>

<hr><!-- Finish of system description -->

<p class="H3"><a name="SystemDesign"></a>System Design</p>
<p class="H4"><a name="SystemArchitecture"></a>System Architecture</p>
<blockquote>
<p class="F">The system is designed to comply with the MVC (Model–View–Controller) architecture.</p>
<p align="center"><img src="classdiag/swA8mvc.jpg"/></p>
<p class="F">Both Server and Client have their own Model, View and Controller. In Server-Side, the View generates a representation of a interface. This representation is downloaded to the Client which displays it. The Controller on the Server interprets the information from Client and routes the request to the View, which update the interface. The Model on the Server manages the database system. In Client-Side, the View renders the interface to the screen, and the Controller interprets the keyboard and mouse events. The Model on Client deals with the data received from Server.</p>
<p class="F">The overall system design is shown below.</p>
<p align="center"><img src="OverallSystem.png"/></p>
</blockquote>
<p class="H4"><a name="DesignPatterns"></a>Design Patterns</p>
<blockquote>
<p class="H5"><a name="Composite"></a>Composite</p>
<p class="F">The Composite pattern is used at the client side to organize the elements on the interface. In the system, all the information display and all the inputs are done through <i>forms</i>, which are similar to the concept in Web that's under the same name. A form can contain both data output elements such as <i>Image Display</i>s and <i>Text Display</i>s and data input elements such as <i>Radio</i>s, <i>Checkbox</i>es and <i>Text Input</i>s. The forms can be saved on the server for future continuation or be submitted directly.</p>
<p align="center"><img src="Composite.png"/></p>
<p class="H5"><a name="FactoryMethod"></a>Factory Method</p>
<p class="F">The Factory Method pattern is used at the client side to defer the instantiation of Client to its subclasses.</p>
<p align="center"><img src="FactoryMethod.png"/></p>
<p class="F">It is also used at the server side to implement different command processing logics for different kind of users.</p>
<p class="H5"><a name="Decorator"></a>Decorator</p>
<p class="F">The Decorator pattern is used at the client side to control the appearances of the <i>Interface Element</i>s.</p>
<p align="center"><img src="Decorator.png"/></p>
<p class="H5"><a name="Flyweight"></a>Flyweight</p>
<p class="F">The Flyweight pattern is used at the server side to reduce repetitive data storage. The options in ballots are stored as objects on the server, and they are organized as flyweights in the system. Some of the registration info of the voters, such as the zip codes, are also stored as flyweights.</p>
<p align="center"><img src="FlyWeight.png"/></p>
<p class="H5"><a name="Observer"></a>Observer</p>
<p class="F">The Observer pattern is implemented over the client-server connection to perform real-time update of election results.</p>
<p align="center"><img src="Observer.png"/></p>
<p class="H5"><a name="Proxy"></a>Proxy</p>
<p class="F">The Proxy pattern is used at the client side. It controls the access to the server, and implements security mechanisms such as connection timeouts.</p>
<p align="center"><img src="Proxy.png"/></p>
<p class="H5"><a name="Command"></a>Command</p>
<p class="F">The Command pattern is used both at the client side and at the server side. It encapsulate the requests and responds in the system, and let the system queue or log them. It also supports undoable operations.</p>
<p align="center"><img src="Command.png"/></p>
<p class="H5"><a name="IteratorandStrategy"></a>Iterator and Strategy</p>
<p class="F">The Iterator and Strategy patterns are applied in the vote tally logic components. The Strategy pattern is used to encapsulate different statistical algorithms for election result computation. The Iterator pattern is used to encapsulate different methods to iterate over the <i>BallotList</i>.</p>
<p align="center"><img src="Strategy&Iterator.png"/></p>
<p class="H5"><a name="Memento"></a>Memento</p>
<p class="F">The Memento pattern is implemented to realize the "save for later" functionality. When an electorate clicks the "save for later" button on the form, the form (ballot) he/she is working on will create a memento and save it on the server. This way, the form can be restored later. The client side can also take advantage of this feature to implement a mechanism to deal with power-outage problems.</p>
<p align="center"><img src="Memento.png"/></p>
<p class="H5"><a name="Facade"></a>Facade and Singleton</p>
<p class="F">The Facade pattern provides a interface to a set of database interfaces in a database subsystem. Facade defines a higher-level interface that makes the database subsystem easier to use for the server. The Singleton pattern is used to ensure the Database Interface only has one instance.</p>
<p align="center"><img src="Facade.png"/></p>
<p class="H5"><a name="State"></a>State</p>
<p class="F">The State pattern is applied in the system to implement different command processing strategy for the client depending on the identity of the client. The identity is regarded as the state of the client.</p>
<p align="center"><img src="State.png"/></p>
</blockquote>

<hr><!-- Finish of system design -->

<p class="H3"><a name="Discussion">Discussion</a></p>
<blockquote>
<p class="F">Although the system is designed to comply with the MVC architecture, since the View and the Controller at the client side share the same visual components, these two parts and their logics are not separated explicitly during the design process.</p>
<p class="F">We used Command pattern to do server-client communication, instead of using Interpreter pattern, as is the case in real-world Web system. This is due to the fact that the Command pattern gives more flexibility when processing the commands. For example, with the Command pattern, commands can be queued before processed, which is hard for the Interpreter pattern to realize.</p>
<p class="F">The Flyweight pattern could also be used on the ballots submitted by the electorates to reduce storage cost. For example, for a ballot consists of 10 items, with each item featuring 4 options, there are a total of 4<sup>10</sup>=1048576 possible submitted ballots. However, if the election is intended for all the people in the U.S., there could be more than 100 million votes in total, and using this simple enumeration will dramatically improve the storage efficiency.</p>
</blockquote>

</body>
</html>
